<template> 
        <div class="page">
            <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <div class="top">
            <!-- <div class="zuo">
                <img style="height:20px;width: 20px;" src="../cby/photo/返回.png" alt="" @click="back()">
            </div> -->
            <div class="you">
                <span>手工圈详情</span>
            </div>


        </div>
        <div class="body">
            <div class="hang" v-for="(item,index) in items" :key="index">
                <div class="one">
                    <div class="zuo">
                        <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                    </div>
                    <div class="you">
                        <div class="y_s">
                            {{item.name}}
                        </div>
                        <div class="y_x">
                            <div class="y_x_z">{{item.time}}前</div>
                        </div>
                    </div>
                </div>
                <div class="two">
                    {{item.content}}
                </div>
                <div class="three">
                    <div v-for="(value,index) in item.picture" :key="index">
                        <img :src="value" alt="">
                    </div>
                </div>
                <div class="four">
                    <div class="left">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.d_z" alt=""
                                @click="dianzan(index)">
                            <span>{{ dianzan_number }}</span>
                        </div>
                    </div>
                    
                    <div class="right">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.s_c" alt=""
                                @click="shoucang(index)">
                            <span>{{item.now_shou}}</span>
                        </div>
                    </div>
                </div>
                <div class="five">
                    <div class="five_z">
                        <div style="background-size: cover;margin: 3px;">
                            <img style="height: 15px;width: 15px;" src="./photo/点赞后.png" alt="">
                        </div>

                        <div style="text-align: center;font-size: 5px;color: #a3a3a3;">2</div>
                    </div>
                    <div class="five_y">
                        <!-- 渲染点赞头像部分 -->
                        <div style="margin: 3px 3px 0px 0px;">
                            <img style="height: 25px;width: 25px;border-radius: 50%;" src="./photo/3.jpg" alt="">
                            <img style="height: 25px;width: 25px;border-radius: 50%;" src="./photo/3.jpg" alt="">
                        </div>

                    </div>
                </div>
                <div class="six">
                    <div class="six_zuo">
                        <div style="background-size: cover;margin: 3px;">
                            <img style="height: 15px;width: 15px;" src="./photo/评论.png" alt="">
                        </div>
                        <div style="text-align: center;font-size: 5px;color: #a3a3a3;">2</div>
                    </div>

                    
                    <div style="flex: 1;">
                        <!-- 评论循环部分 -->
                        <div class="six_you">
                            <div class="y_zuo">
                                <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                            </div>
                            <div class="y_you">
                                <div class="y_you_s">
                                    <div class="y_you_s_z">{{item.name}}</div>
                                    <div class="y_you_s_y">
                                        <span>2小时前</span><br>
                                        
                                    </div>
                                </div>
                                <div class="y_you_x">
                                    <div class="y_you_x_z">
                                        <!-- <textarea readonly style="resize: none; border: 0;width: 100%; background-color: #f4f4f4;" cols="2" rows="2">asiudghaiuwdhiuhwaiudhiasiudghaiuwdhiuhwaiudhi</textarea> -->
                                        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
                                    </div>
                                    <div class="y_you_x_y">
                                        <span @click="delete_fn()">删除</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="six_you">
                            <div class="y_zuo">
                                <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                            </div>
                            <div class="y_you">
                                <div class="y_you_s">
                                    <div class="y_you_s_z">{{item.name}}</div>
                                    <div class="y_you_s_y">
                                        <span>2小时前</span><br>
                                        
                                    </div>
                                </div>
                                <div class="y_you_x">
                                    <div class="y_you_x_z">
                                        <!-- <textarea readonly style="resize: none; border: 0;width: 100%; background-color: #f4f4f4;" cols="2" rows="2">asiudghaiuwdhiuhwaiudhiasiudghaiuwdhiuhwaiudhi</textarea> -->
                                        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
                                    </div>
                                    <div class="y_you_x_y">
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    

                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="yi">
                <img style="height:20px;width: 20px;" src="../cby/photo/返回.png" alt="" @click="back()">
            </div>
            <div class="er">
                <input type="text" placeholder="发表评论..."
                    v-model="ping_lun"
                    style="border-radius: 5px;background-color: #ffffff;border: 0px;width: 100%;height: 30px;margin-top: 5px;font-size: 15px;padding-left: 10px;" />
            </div>
            <div class="san">
                <img style="height:20px;width: 20px;" src="../cby/photo/发.png" alt="" @click="pinglun_fn">
            </div>
        </div>
        </van-pull-refresh>
    </div>
</template>
    
<script setup lang='ts'>
import { Toast } from "vant";
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive , onMounted} from 'vue'
const router = useRouter()
const route = useRoute()
//下拉刷新
const count = ref(0);
const loading = ref(false);

onMounted(()=>{
    console.log(route.query.pro_id);   
})
const onRefresh = () => {
      setTimeout(() => {
        Toast('刷新成功');
        loading.value = false;
      }, 1000);
    };
    
const items = reactive(
    [
        {
            name: '花花',
            time: '2小时',
            content: '宝玉宝玉宝玉宝玉',
            photo: new URL(`photo/2.jpg`, import.meta.url).href,
            picture: [
                new URL(`photo/1.jpg`, import.meta.url).href,
                new URL(`photo/2.jpg`, import.meta.url).href,
                new URL(`photo/3.jpg`, import.meta.url).href,
                new URL(`photo/4.jpg`, import.meta.url).href,
                new URL(`photo/1.jpg`, import.meta.url).href,
                new URL(`photo/2.jpg`, import.meta.url).href,
                new URL(`photo/3.jpg`, import.meta.url).href,
            ],
            dian_zan: false,
            d_z: new URL(`photo/点赞前.png`, import.meta.url).href,
            shou_cang: false,
            now_shou: '收藏',
            s_c: new URL(`photo/收藏前.png`, import.meta.url).href
        }
    ]
)

function back() {
    router.push({
        name: 'find'
    })
}

const dianzan_number = ref(0)
function dianzan(index: any) {
    items[index].dian_zan = !(items[index].dian_zan)
    if (items[index].dian_zan == true) {
        items[index].d_z = new URL(`photo/点赞后.png`, import.meta.url).href
        dianzan_number.value = dianzan_number.value + 1
    }
    else if (items[index].dian_zan == false) {
        items[index].d_z = new URL(`photo/点赞前.png`, import.meta.url).href
        dianzan_number.value = dianzan_number.value - 1
    }
}

function shoucang(index: any) {
    items[index].shou_cang = !(items[index].shou_cang)
    if (items[index].shou_cang == true) {
        items[index].now_shou = "已收藏"
        items[index].s_c = new URL(`photo/收藏后.png`, import.meta.url).href
    }
    else if (items[index].shou_cang == false) {
        items[index].now_shou = "收藏"
        items[index].s_c = new URL(`photo/收藏前.png`, import.meta.url).href
    }
}

//删除自己的评论
function delete_fn(){
    console.log(8888888888);
    
}
//评论、输入框
let ping_lun = ref(null)
function pinglun_fn(){
    console.log(ping_lun.value);   
}
</script>
    
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.page {
    height: 100vh;
    width: 100vw;
}

.top {
    height: 45px;
    text-align: center;
    line-height: 45px;
    color: #5a5a5a;
    display: flex;
}

.zuo {
    padding: 4.5px 0px 4.5px 4.5px;
}

.you {
    flex: 1;
}

.body {
    height: 86vh;
    overflow: scroll;
    overflow-x: hidden;
}

.hang {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.one,
.two,
.three {
    margin: 5px 0px 5px 0px;
}

.three>div {
    width: 29vw;
    height: 100px;
    /* border: 1px solid black; */
    display: inline-block;
    margin: 0px 3px 3px 3px;
}

img {
    width: 29vw;
    height: 100px;
    display: inline-block;
    margin: 0px 3px 3px 3px;
}

.one {
    display: flex;
}

.zuo {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

.you {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.y_s {
    flex: 1;
    font-size: 15px;
}

.y_x {
    flex: 1;
    display: flex;
    font-size: 10px;
}

.y_x_z {
    color: #a4a4a4;
}

.y_x_y {
    margin-left: 10px;
    color: #a4a4a4;
}

.two {
    font-size: 15px;
    padding-left: 5px;
}

.four {
    padding-top: 5px;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    display: flex;
    background-color: #f4f4f4;
    padding: 5px 0px 5px 0px;
}

.five {
    background-color: #f4f4f4;
    display: flex;
    border-top: 1px solid #ececec;
}

/* .five_z{
    border: 1px solid black;
}
.five_y{
    border: 1px solid black;
} */
.six {
    background-color: #f4f4f4;
    display: flex;
    border-top: 1px solid #ececec;
}

/* .six_zuo{
    border: 1px solid black;
} */

.six_you {
    flex: 1;
    display: flex;
    margin: 5px 5px 0px 5px;
    border-bottom: 1px solid #ececec;
}

/* .y_zuo{
    border: 1px solid black;
} */
.y_you {
    flex: 1;
}

.y_you_s {
    display: flex;
}

.y_you_s_z {
    flex: 1;
    font-size: 15px;
}

.y_you_s_y {
    font-size: 10px;
    color: #bfbfbf;
    padding-right: 5px;
}

.y_you_x {
    display: flex;
}

.y_you_x_z {
    flex: 1;
    font-size: 15px;
    color: #7c7c7c;
    margin-right: 5px;
}
.y_you_x_z >span{
    width: 100px;
	word-break: break-all;
	overflow: auto;
	white-space: normal;
}
.y_you_x_y {
    font-size: 15px;
    color: #7b4643;
    padding-right: 5px;
    width: 30px;
}

.left {
    flex: 1
}

.l_z {
    text-align: center;
    color: #787878;
    font-size: 15px;
}

.zhong {
    flex: 1
}

.right {
    flex: 1
}

.bottom {
    height: 45px;
    background-color: #efefef;
    display: flex;
}

.yi,
.san {
    flex: 1;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 45px;
}

.er {
    flex: 7;
    margin-right: 10px;
}
</style>